const xhr = new XMLHttpRequest();
var words = document.querySelector("#show_words_box");
var show_explain_row = document.querySelector("#show_explain_row");
var explain = document.querySelector("#show_explain_box");
var last_one = document.querySelector("#last_one");
var obscure = document.querySelector("#obscure");
var next_one = document.querySelector("#next_one");
var cover_layer = document.querySelector("#cover_layer");
var label_box=document.querySelector("#label_box");
var goal = document.querySelector("#goal");
var upload=document.querySelector("#upload");
var netsite = "http://39.103.159.52:6607";
var vacabulary;
var NO_words = 0;
var aimto=10;
var count=1;
function get_vacabulary() {
    let data = {}
    xhr.open('POST', netsite + '/vacabulary_get');
    xhr.send();
    xhr.onreadystatechange = function () {
        console.log(xhr.readyState);
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                data = JSON.parse(xhr.response);
                vacabulary = data;
                NO_words = vacabulary[0]["目前到"] - 1;
                console.log(vacabulary[0]);
                firstword=NO_words;
            }
        }
    }
    return data;
}
function sendmark(mark) {
    xhr.open('POST', netsite + '/vacabulary_update');
    xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
    xhr.send(mark);
}
function show_vacabulary() {
    console.log(count,NO_words);
    words.innerHTML = count+". "+vacabulary[NO_words]["词汇"];
    explain.innerHTML = "";
}
function setgoal() {
    aimto=parseInt(goal.value);
    surviveWord=aimto;
    show_vacabulary();
}
get_vacabulary();

next_one.addEventListener("click", function () {
    if (explain.innerHTML == "") {
        explain.innerHTML = vacabulary[NO_words]["中文意思"];
        if(vacabulary[NO_words]["第一次"] && vacabulary[NO_words]["第一次"]=="1"){
            explain.innerHTML = explain.innerHTML + '\n***记得***';
        }
    } else {
        vacabulary[NO_words]["第一次"]="1";
        if (vacabulary[NO_words + 1] && count<aimto) {
            NO_words++;
            count++;
            while(vacabulary[NO_words]["第一次"] == "1"&&vacabulary[NO_words + 1]&& count<aimto){
                NO_words++;
                count++;
            }
        } else if(vacabulary[NO_words + 1]){
            NO_words = firstword
            count=1;
        } else {
            NO_words = 0;
        }
        show_vacabulary();
    }
})

obscure.addEventListener("click", function () {
    if (explain.innerHTML == "") {
        explain.innerHTML = vacabulary[NO_words]["中文意思"];
        if(vacabulary[NO_words]["第一次"] && vacabulary[NO_words]["第一次"]=="1"){
            explain.innerHTML = explain.innerHTML + '\n***记得***';
        }
    } else {
        vacabulary[NO_words]["第一次"]="0";
        if (vacabulary[NO_words + 1] && count<aimto) {
            NO_words++;
            count++;
        } else if(vacabulary[NO_words + 1]){
            NO_words = firstword
            count=1;
        } else {
            NO_words = 0;
        }
        show_vacabulary();
    }
})

last_one.addEventListener("click", function () {
    if (vacabulary[NO_words - 1] && count>0) {
        NO_words--;
        count--;
        show_vacabulary();
    } 
})

show_explain_row.addEventListener("dblclick", function () {
    cover_layer.style.display = "block";
    let words=firstword;
    while(vacabulary[words]["第一次"]=="1"){
        words++;
    }
    vacabulary[0]["目前到"] = words + 1;
    sendmark(JSON.stringify(vacabulary));
})

cover_layer.addEventListener("dblclick", function () {
    if (parseInt(goal.value)) {
        cover_layer.style.display="none";
        setgoal()
    }else{
        goal.value ="..";
    }
})
// window.onunload = function(e){ 
//     NO_words=firstword;
//     while(vacabulary[NO_words]["第一次"]=="1"){
//         NO_words++;
//     }
//     vacabulary[0]["目前到"] = NO_words + 1;
//     sendmark(JSON.stringify(vacabulary));
// }
